import { VAR } from "../introduce.js"

window.onload = function () {
	// 先渲染

	// 提取数据
	const taskInfo = JSON.parse(localStorage.getItem("deliveryInfo"))
	const index = new URLSearchParams(location.search).get("id") || 0

	// 任务编号
	const accounts = document.querySelector(".essential span")
	// 起始地点
	const go = document.querySelector(".essential .hideEssential .go p")
	// 重终点
	const to = document.querySelector(".essential .hideEssential .to p")
	// 司机电话发货期等
	const drivephone = document.querySelector(
		".essential .hideEssential .text .phone"
	)
	const drivetimego = document.querySelector(
		".essential .hideEssential .text .timego"
	)
	const drivetimeto = document.querySelector(
		".essential .hideEssential .text .timeto"
	)
	const drivename = document.querySelector(
		".essential .hideEssential .text .name"
	)
	// 车辆司机信息
	const driverName = document.querySelector(".driver .uname")
	const drivernumber = document.querySelector(".driver .number")
	// 车辆信息
	// 货物信息

	// 渲染数据
	// 提取数据

	function render() {
		// 封装渲染函数
		// 任务编号;
		accounts.innerHTML = `(任务编号:${taskInfo[index].taskNumber})`
		// 地点
		go.innerHTML = taskInfo[index].actualAddress
		to.innerHTML = taskInfo[index].deliveryAddress
		// 司机电话发货期等
		drivephone.innerText = taskInfo[index].phone
		drivetimego.innerHTML = taskInfo[index].pickupTime
		drivetimeto.innerHTML = taskInfo[index].estimatedDeliveryTime
		drivename.innerHTML = taskInfo[index].contactPerson
		// 车辆司机信息;
		driverName.innerHTML = taskInfo[index].contactPerson
		// 车牌号
		drivernumber.innerHTML = taskInfo[index].carNumber
		//运输路线
		// 货物信息
		// 渲染运输路线
		const roteGo = document.querySelector(".transRoutes .find .go div")
		const rotego = document.querySelector(".transRoutes .find .go p")
		const roteTo = document.querySelector(".transRoutes .find .destination div")
		const roteto = document.querySelector(".transRoutes .find .destination p")
		// 提货信息
	}
	render()
	// 页面后退一步实现
	const back = document.querySelector(".topPreset a")
	back.addEventListener("click", function () {
		history.back()
	})
	// 获取元素
	// 任务编号
	const taskNum = document.querySelector(".essential .wrapper .info span")
	// 基本信息展开按钮
	const taskNumUnfold = taskNum.nextElementSibling
	// 折叠层
	const hideEssential = document.querySelector(".hideEssential")
	let flag1 = false
	taskNumUnfold.addEventListener("click", function () {
		flag1 = !flag1
		if (flag1) {
			hideEssential.style.display = "block"
			taskNumUnfold.innerHTML = "-"
		} else {
			hideEssential.style.display = "none"
			taskNumUnfold.innerHTML = "+"
		}
	})
	// 车辆司机信息
	const driverNumUnfold = document.querySelector(".driver .wrapper #fold")
	const hideDrive = document.querySelector(".hideDrive")
	let flag2 = false
	driverNumUnfold.addEventListener("click", function () {
		flag2 = !flag2
		if (flag2) {
			hideDrive.style.display = "block"
			driverNumUnfold.innerHTML = "-"
		} else {
			hideDrive.style.display = "none"
			driverNumUnfold.innerHTML = "+"
		}
	})
	// 运输路线
	const transRoutes = document.querySelector(".transRoutes .wrapper #fold")
	const findtransRoutes = document.querySelector(".transRoutes .find")
	let flag3 = false
	transRoutes.addEventListener("click", function () {
		flag3 = !flag3
		if (flag3) {
			findtransRoutes.style.display = "block"
			transRoutes.innerHTML = "-"
		} else {
			findtransRoutes.style.display = "none"
			transRoutes.innerHTML = "+"
		}
	})
	// 交货信息
	const deliveryInfo = document.querySelector(".deliveryInfo .wrapper #fold")
	const hideInfo = document.querySelector(".hideInfo")
	let flag6 = false
	deliveryInfo.addEventListener("click", function () {
		flag6 = !flag6
		if (flag6) {
			hideInfo.style.display = "block"
			deliveryInfo.innerHTML = "-"
		} else {
			hideInfo.style.display = "none"
			deliveryInfo.innerHTML = "+"
		}
	})
	// 货物信息
	const goodsInfo = document.querySelector(".goodsInfo .wrapper #unfold")
	const hidegoods = document.querySelector(".hidegoods")
	let flag4 = false
	goodsInfo.addEventListener("click", function () {
		flag4 = !flag4
		if (flag4) {
			hidegoods.style.display = "block"
			goodsInfo.innerHTML = "-"
		} else {
			hidegoods.style.display = "none"
			goodsInfo.innerHTML = "+"
		}
	})

	//动态搜索
	const search = document.querySelector(
		".goodsInfo .wrapper .hidegoods .serch input"
	)
	const textSpan = document.querySelectorAll(
		".goodsInfo .wrapper .hidegoods ul li .textt"
	)
	search.addEventListener("input", function () {
		textSpan.forEach(function (item, index) {
			item.innerText.includes(search.value)
				? (item.parentNode.style.display = "block")
				: (item.parentNode.style.display = "none")
		})
	})
	// 异常信息
	const abnormal = document.querySelector(".abnormal .wrapper #fold")
	const hidecontent = document.querySelector(".abnormal .content")
	let flag7 = false
	abnormal.addEventListener("click", function () {
		flag7 = !flag7
		if (flag7) {
			hidecontent.style.display = "block"
			abnormal.innerHTML = "-"
		} else {
			hidecontent.style.display = "none"
			abnormal.innerHTML = "+"
		}
	})
	// 异常上报
	const delayBtn = document.querySelector(".delay .delayBtn")
	const delivery = document.querySelector(".delay .delivery")
	delayBtn.addEventListener("touchstart", function () {
		taskInfo[index].isDelay = true
		// 修改数据后上传到本地
		localStorage.setItem("deliveryInfo", JSON.stringify(taskInfo))
		delayBtn.disabled = true
		delayBtn.classList.add("active2")
		location.href = "./Report-abnormal.html"
	})
	delivery.addEventListener("touchstart", function () {
		// 修改数据
		taskInfo[index].Status = 1
		taskInfo[index].isDeliver = true
		// 修改数据后上传到本地
		localStorage.setItem("deliveryInfo", JSON.stringify(taskInfo))
		delivery.disabled = true
		delivery.classList.add("active1")
		// 延迟提货传参 数据上传
		location.href = "../module04/mainFunctionPage.html"
	})
	// 异常上报
	// 获取数据
	let arr = []
	arr = JSON.parse(localStorage.getItem("dataAbnormal")) || [
		{
			times: "2023.09.06 7:00",
			type: "漏油了啊"
		}
	]
	const ul = document.createElement("ul")
	ul.innerHTML = `
  <li class="report">
              <p>上报时间</p>
              <span>${arr[0].times}</span>
            </li>
            <li class="typeS">
              <p>异常类型</p>
              <span>${arr[0].type}</span>
              <a href="javascript:;"><img src="./image/右向箭头.png" alt></a>
            </li>
            <li class="outcome">
              <p>
                处理结果
              </p>
              <span>继续运输</span>
            </li>`
	hidecontent.append(ul)
	// 点击上传图片加载图片
	// 图片放大镜
	const magnifying = document.querySelector(".magnifying")
	const magnia = document.querySelector(".magnifying a")
	// 放回单的ul
	const lis = document.querySelectorAll(".hideInfo ul li")
	console.log(lis)
	// 放货品的ul
	// 点击放大图标对应图片显示
	lis.forEach(function (item) {
		// console.log(item);
		item.addEventListener("click", function (e) {
			if (e.target.tagName === "A") {
				const img = item.querySelector("img")
				console.log(img.src)
				magnifying.style.backgroundImage = `url(${img.src})`
				console.log(magnifying.style.backgroundImage)
				magnifying.style.display = "block"
			}
		})
		item.addEventListener("touchstart", function () {
			var touchStartX = 0
			var touchStartY = 0
		})
		item.addEventListener("touchmove", function (e) {
			let x = e.targetTouches[0].pageX - item.getBoundingClientRect().left
			let y = e.targetTouches[0].pageY - item.getBoundingClientRect().top
			// console.log(x, y);
			if (x >= 0 && x <= 100 && y >= 0 && y <= 100) {
				magnifying.style.backgroundPositionX = -4 * x + "px"
				magnifying.style.backgroundPositionY = -4 * y + "px"
			}
		})
	})
	magnia.addEventListener("click", function () {
		magnifying.style.display = "none"
	})
	// 鼠标移动放大模块移动
}
